/*
  学习目标：React表单-受控组件
  步骤：
     1. state控制表单的value属性或checked属性
     2. onChange配合setState修改数据
  场景💥:
    1. 收集用户输入的内容
    2. 回填表单数据
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    msg: 'helloReact',
  };

  render() {
    return (
      <div>
        <input
          // 1. 表单的value或checked属性, 受state的控制
          value={this.state.msg}
          type="text"
          //2. onChange配合setState修改数据
          // 💥onChange替代onInput, 表示输入事件
          onChange={(e) => {
            this.setState({ msg: e.target.value });
          }}
          //💥 onBlur替代了原生的onChange, 表示失去焦点事件
          onBlur={() => {
            console.log('触发了');
          }}
        />
      </div>
    );
  }
}
